var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
// const ASSET_PATH = 'js/';
module.exports = {
  entry: {
    index: './app/index/index.js',
    download: './app/download/index.js',
    detail: './app/detail/index.js'
  },
  output: {
    // publicPath: ASSET_PATH,
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  devtool: "cheap-module-eval-source-map",
  devServer: {
    // contentBase: path.join(__dirname, "dist"),
    compress: true,
    port: 9000,
    hot: true
  },
  module: {
    loaders: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: "babel-loader"
    }, {
      test: /\.html$/,
      // loaders: ['raw-loader']，這個方式也是可以被接受的。
      loader: "raw-loader"
    }, {
      // 此loader配置项的目标是NPM中的jquery
      test: require.resolve('jquery'),
      // 先把jQuery对象声明成为全局变量`jQuery`，再通过管道进一步又声明成为全局变量`$`
      loader: 'expose-loader?$!expose-loader?jQuery'
    }, {
      test: /\.(jpg|png|gif|svg)$/,
      use: 'url-loader'
    }, {
      test: /\.pcss$/,
      use: [
        {
          loader: 'style-loader',
        },
        {
          loader: 'css-loader',
          options: {
            importLoaders: 1,
          }
        },
        {
          loader: 'postcss-loader'
        }
      ]
    }, {
      test: /\.(woff|woff2|eot|ttf|otf)$/,
      use: 'file-loader'
    }]
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    // new ExtractTextPlugin("[name].[hash].css"),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify('dev')
    }),
    new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery",
      'window.jQuery': 'jquery',
      'window.$': 'jquery'
    }),
    new HtmlWebpackPlugin({
      template: './app/index.html',
      filename: "index.html",
      //这里如果这样写 无法启动 dev-server
      // filename:"../index.html",
      chunks: ['index', 'common', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: './app/download.html',
      filename: "download.html",
      chunks: ['download', 'common', 'manifest']
    }),
    new HtmlWebpackPlugin({
      template: './app/detail.html',
      filename: "detail.html",
      chunks: ['detail', 'common', 'manifest']
    }),
    /**
     * 这里有个问题，只有在模块中引入最低次数的模块才会被打包进入 common.js
     * 必须是 import 或者 require
     * 然而，使用 ProvidePlugin 定义了之后，单纯使用 $ 是不会使 jqury 被打包进 common.js 的
     ****************************error*********************
     * 以上理解是错误的！ ProvidePlugin 的作用是当webpack加载到某个js模块里，
     * 出现了未定义且名称符合（字符串完全匹配）配置中key的变量时，会自动 require 配置中value所指定的js模块。
     * 所以可以直接使用 $
     * 造成理解错误的原因是因为 npm run build 的配置文件里没有写 ProvidePlugin
     **/
    new webpack.optimize.CommonsChunkPlugin({
      name: ['common', 'manifest'],
      minChunks: 2
    })
  ]
}